<div id="mediaDetailMenu">
    <div id="mediaTitle">{$media->getLabel()}</div>
    <div id="mediaClose"><button type="button" id="mediaCloseButton">{t}Close{/t} {icon name="close.png"}</button></div>
</div>

<div id="mediaDetailDesc">
	<table width="100%" id="detailsList">
{if $actionAddImg == "image" || $actionAddImg == "media"}
<div id="pictureId" style="display:none">{$media->getUniqueId()}</div>
<div id="type" style="display: none">img</div>
{else}
        {if $media->isImage()}
		<tr>
            <td style="width: 26px;">
                {t assignTo=iconTitle}Dimensions - Allow you to choose different images dimensions. To add dimensions, click on the below cons "declination" button.{/t}{icon name='help.png' title=$iconTitle class="toolTip"}
            </td>
			<td>
                <label for="sizes">{t}Dimensions{/t}</label>
            </td>
			<td>
				<select id="sizes" name="form[picture]">
				{foreach from=$media->getAllSizesImagesObjects() item=file}
				{assign var='dim' value=$file->getDimensions()}
					<option value="{$file->getFileName()}.{$file->getExtension()}">{$dim.0} x {$dim.1}</option>
				{/foreach}
				</select>
                <div id="path" style="display:none">{$media->getFileUrl("")}</div>
				<div id="pictureId" style="display:none">{$media->getUniqueId()}</div>
				<div id="pictureLang" style="display:none">{$media->getLang()|lower}</div>
                <div id="type" style="display: none">img</div>
				<a href="javascript:void(0);" class="button viewButton toolTip" onclick="previewPicture();" class="toolTip" title="{t}Preview - click here to preview the media.{/t}"></a>
				<a href="javascript:void(0);" class="button cropButton toolTip" onclick="centeredPopup('{$URL_RELATIVE}/index.php?module=medias&action=AjaxEditImage&folderId={$media->getFolderId()}&docId={$media->getUniqueId()}&docLang={$media->getLang()}&opener=filemanager','Edition', 1024, 768);" class="toolTip" title="{t}Declination - Click here to add a new image dimensions.{/t}"></a>
            </td>
		</tr>
        {else}
        <tr>
            <td style="width: 26px;">
                {t assignTo=iconTitle}Text - Type here the link text which will be generated.{/t}{icon name='help.png' title=$iconTitle class="toolTip"}
            </td>
            <td>{t}Link text{/t}</td>
            <td><input type="text" name="form[texte]" id="formTexte" value="{$media->getTitle()}" style="width: 300px;"/></td>
            <div id="path" style="display:none">{$media->getFileUrl()}</div>
            <div id="pictureId" style="display:none">{$media->getUniqueId()}</div>
            <div id="pictureLang" style="display:none">{$media->getLang()|lower}</div>
            <div id="type" style="display: none">fic</div>
        </tr>
        <tr>
            <td>
                {t assignTo=iconTitle}Target - You can defined if the document will open in a new window or not.{/t}{icon name='help.png' title=$iconTitle class="toolTip"}
            </td>
            <td>{t}Link target{/t}</td>
            <td>
                <select name="form[cible]" id="formCible">
                    <option value="_self">{t}Open in the same window{/t}</option>
                    <option value="_blank" selected="selected">{t}Open in a new window{/t}</option>
                </select>
            </td>
        </tr>
		{/if}
		<tr>
            <td>
                {t assignTo=iconTitle}Title - Type here the picture title which wil appear when a user mouse over it.{/t}{icon name='help.png' title=$iconTitle class="toolTip"}
            </td>
			<td>
                <label for="formTitle">{t}Title{/t}</label>
            </td>
			<td>
                <input type="text" name="form[title]" id="formTitle" value="{$media->getTitle()}" style="width: 300px;"/>
            </td>
		</tr>
		{if $media->isImage()}
        <tr>
            <td>
                {t assignTo=iconTitle}Alternative text - Type here the alternative picture text, that increase accessibility a lot.{/t}{icon name='help.png' title=$iconTitle class="toolTip"}
            </td>
			<td>
                <label for="formAlt">{t}Alternative text{/t}</label>
            </td>
			<td>
                <input type="text" name="form[alt]" id="formAlt" value="{$media->getAlt()}" style="width: 300px;"/>
            </td>
		</tr>
        <tr>
            <td>
                {t assignTo=iconTitle}Classes - Type here the classes name associated to the picture. Seperate them with a space.{/t}{icon name='help.png' title=$iconTitle class="toolTip"}
            </td>
			<td>
                <label for="formClasses">{t}Class(es){/t}</label>
            </td>
			<td>
                <input type="text" name="form[class]" id="formClasses" value="" style="width: 150px;"/>
            </td>
        </tr>
        <tr>
            <td>{t assignTo=iconTitle}Alignment - Define the picture alignment on the page.{/t}{icon name='help.png' title=$iconTitle class="toolTip"}</td>
            <td>
                <label>{t}Alignment{/t}</label>
            </td>
            <td>
                <input id="formAlign" type="hidden" name="form[align]" value="none" />
                <div id="alignleft" onclick="changeAlign('left');"></div>
                <div id="aligncenter" onclick="changeAlign('center');"></div>
                <div id="alignright" onclick="changeAlign('right');"></div>
                <script type="text/javascript">
                    {literal}
                    function changeAlign(alignement)
                    {
                            if($('#align'+alignement).hasClass('selectedAlignement'))
                            {
                                $('#align'+alignement).removeClass('selectedAlignement');
                                $('#formAlign').val('none');
                            }
                            else
                            {
                                $('#alignleft').removeClass('selectedAlignement');
                                $('#aligncenter').removeClass('selectedAlignement');
                                $('#alignright').removeClass('selectedAlignement');
                                $('#align'+alignement).addClass('selectedAlignement');
                                $('#formAlign').val(alignement);
                            }
                    }
                    {/literal}
                </script>                
            </td>
        </tr>
        <tr>
            <td>{t assignTo=iconTitle}Borders - Define a border size and color for the picture.{/t}{icon name='help.png' title=$iconTitle class="toolTip"}</td>
            <td>
                <label>{t}Borders{/t}</label>
            </td>
            <td>
                {t}size{/t} : <input type="text" name="form[borderWeight]" id="formBorderWeight" value="" style="width: 30px; text-align : center" /> pixels
                - {t}color{/t} : <div id="colorSelector"><div id="selectorBg" style="background-color: rgb(0, 0, 0);"></div></div><div id="hexColor" style="display:none">#000000</div>
            </td>
        </tr>
        <tr>
            <td>{t assignTo=iconTitle}Margins - Define the picture margins size around it.{/t}{icon name='help.png' title=$iconTitle class="toolTip"}</td>
            <td>
                <label>Marges</label>
            </td>
            <td>
                <label for="formMarginRight" class="margin marginRight">{icon name="marginRight.png" style="vertical-align: middle;"}</label><input type="text" name="form[marginV]" id="formMarginRight" value="" style="width: 30px; text-align: center" />
                <label for="formMarginBottom" class="margin marginBottom">{icon name="marginBottom.png" style="vertical-align: middle;"}</label><input type="text" name="form[marginBottom]" id="formMarginBottom" value="" style="width: 30px; text-align: center" />
                <label for="formMarginLeft" class="margin marginLeft">{icon name="marginLeft.png" style="vertical-align: middle;"}</label><input type="text" name="form[marginV]" id="formMarginLeft" value="" style="width: 30px; text-align: center" />
                <label for="formMarginTop" class="margin">{icon name="marginTop.png" style="vertical-align: middle;"}</label><input type="text" name="form[marginTop]" id="formMarginTop" value="" style="width: 30px; text-align : center" />
            </td>
        </tr>
		{/if}
{/if}
   		<tr>
            <td style="padding: 4px 0; text-align:right;" colspan="3">
        		<button class="bigGreenButton" onclick="save();" type="submit" id="saveButton">{if $isImg=='true'}{t}Insert{/t}{else}{t}Replace{/t}{/if}</button>
                <span id="result"></span>
            </td>
		</tr>
	</table>
</div>